<template>
	<view class="container" 
	@touchstart="undertouch" 
	@touchend="untouch" 
	:class="{touch: touch,untouch: !touch}"
	@touchmove="touchmove">
		<image src="../../static/rili-2.png" mode="aspectFit" class="icon"></image>
		<view class="">
			<text class="eventName">{{data.name}}</text>
			<view class="descriptionBox">
				<text class="description">
					<text v-if="props.type == 0">
						DDL:{{data.end}} 余{{deltaDate}}天 已过{{data.timeRate}}%
					</text>
					<text v-if="props.type == 1">
						完成日期:{{data.donedate}}
					</text>
				</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, defineProps, defineEmits, onMounted, ref } from 'vue';
import mydate from '../../util/mydate';
const props = defineProps({
	data:{
		type:Object,
		default(){
			return {
				name: "事件名称",
				begin: "2024-11-29",
				end: "2024-11-29",
				description: "这是一个描述",
				timeRate:"50",
			}
		},
	},
	type:{
		type:Number,
		default(){
			return 0;
		},
	},
})
const emit = defineEmits(["longOn"])
// 计算剩余天数
const deltaDate = computed(()=>{
	// console.log("日期结果",props.data.end);
	return mydate.dayComputed(mydate.todayString(),props.data.end);
})

// 监测触碰相关
const touch = ref(false);
const move = ref(0);
const moveY = ref(0);
const touchdown = ref(false);
function touchmove(e){
	console.log("移动",e.touches[0].clientY);
	moveY.value = e.touches[0].clientY;
	move.value = e.touches[0].pageX;
};
function undertouch(e){
	// console.log("点击",e);
	// console.log(e)
	let startX = e.touches[0].pageX;
	let startY = e.touches[0].clientY;
	touchdown.value = true;
	move.value = startX;
	moveY.value = startY;
	setTimeout(()=>{
		if(Math.abs(startX-move.value)<10 
		&& touchdown.value == true 
		&& Math.abs(startY-moveY.value)<10)
		{
			console.log(startY,moveY.value)
			touch.value = true;
			emit("longOn",{});
		}
	},300)
}
function untouch(e){
	// console.log("转移",e);
	touch.value = false;
	touchdown.value = false;
}
</script>

<style lang="scss" scoped>
.icon{
	margin-left: 40rpx;
	margin-right: 20rpx;
	width: 100rpx;
	height: 100rpx;
}
.container{
	background-color: transparent;
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	height: 120rpx;
	opacity: 1;
}
.touch{
	background-color: rgb(229, 234, 247);
	transition: background-color 0.2s;
}
.untouch{
	background-color: transparent;
	transition: background-color 0.2s;
}
.descriptionBox{
	display: flex;
	flex-direction: row;
	align-items: center;
	width:100%;
} 
.eventName{
	font-size: 40rpx;
	font-weight: 600;
	letter-spacing: 0rpx;
	text-align: left; 
	vertical-align: top;
}
.description{
	font-size: 35rpx;
	font-weight: 500;
	color: rgb(133, 133, 133);;
}
</style>